﻿<!DOCTYPE HTML>
<html th:with="title='分类管理'">
<head th:include="fragments/header :: header">
</head>
<body id="app">
	<div class="page-container">
		<div class="cl pd-5 bg-1 bk-gray">
			<span class="l">
				<a sec:authorize="hasRole('ROLE_DEVICE_ADD')" class="btn btn-primary size-L radius" href="javascript:;" onclick="add()">
					<i class="Hui-iconfont">&#xe600;</i>
					新增
				</a>
				<a sec:authorize="hasRole('ROLE_DEVICE_BATCH_DELETE')" class="btn btn-danger size-L radius" href="javascript:;" onclick="batchDel()">
					<i class="Hui-iconfont">&#xe6e2;</i>
					批量删除
				</a>
			</span>
			<span class="r">
				<a class="btn btn-success size-L radius" href="javascript:location.replace(location.href);" title="刷新">
					<i class="Hui-iconfont">&#xe68f;</i>
					刷新
				</a>
			</span>
		</div>
		<div class="text-l pd-5">
			设备名称：
			<input type="text" class="input-text size-M" style="width: 150px" placeholder="请输入设备名称" id="deviceName" name="deviceName">
			mac地址：
			<input type="text" class="input-text size-M" style="width: 150px" placeholder="请输入mac地址" id="sn" name="sn">
			联系方式：
			<input type="text" class="input-text size-M" style="width: 150px" placeholder="请输入联系方式" id="mobile" name="mobile">
			<button type="button" class="btn btn-success size-M radius" onclick="query()">
				<i class="Hui-iconfont">&#xe665;</i>
				查询
			</button>
			<font sec:authorize="hasRole('ROLE_DEVICE_APPROVAL')">审核状态：</font>
			<select id="statu" class="select size-M" style="width: 100px; height: 35px" onchange="query()" sec:authorize="hasRole('ROLE_DEVICE_APPROVAL')">
				<option value="">---请选择---</option>
				<option value="pendingApproval" style="color: orange">---待审核---</option>
				<option value="passApproval" style="color: green">--审核通过--</option>
				<option value="referApproval" style="color: red">--审核拒绝--</option>
			</select>
			<font>在线状态：</font>
			<select id="imstatu" class="select size-M" style="width: 100px; height: 35px" onchange="query()">
				<option value="">---请选择---</option>
				<option value="Online" style="color: green">----在线----</option>
				<option value="Offline" style="color: gray">----离线----</option>
				<option value="PushOnline" style="color: red">----断开----</option>
			</select>
			<font>
				设备类型：
				</fout>
				<select id="devType" class="select size-M" style="width: 100px; height: 35px" onchange="query()">
					<option value="">---请选择---</option>
					<option value="0" style="color: red">----横屏----</option>
					<option value="1" style="color: green">----竖屏----</option>
				</select>
		</div>
		<div>
			<table class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<th>
							<input type="checkbox" name="" value="" />
						</th>
						<th>云科号</th>
						<th>mac地址</th>
						<th>设备名称</th>
						<!-- <th width="100">背景音乐</th>
				<th width="100">背景图片</th> -->
						<th>设备位置</th>
						<th>设备城市</th>
						<th>归属用户</th>
						<th>设备类型</th>
						<th>设备滚动速度</th>
						<th>审核状态</th>
						<th>在线状态</th>
						<th>联系方式</th>
						<th>广投墙模板</th>
						<th>分辨率</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr class="text-c" v-for="item in pageData.rows">
						<td>
							<input type="checkbox" value="{{ item.id }}" name="ids">
						</td>
						<td>{{ item.yunkeNum }}</td>
						<td>{{ item.sn }}</td>
						<td>{{ item.deviceName }}</td>
						<!-- <td>{{ item.backgroundMusic }}</td>
				<td><img class="open-viewer" onclick="lockMaxImg()" v-bind:src="item.backgroundImg"  width="100" height="100" ></td> -->
						<td>{{ item.address }}</td>
						<td>{{ item.city }}</td>
						<td>{{ item.user.name }}({{ item.user.loginName }})</td>
						<td>{{ item.showType|deviceTypeFilter}}</td>
						<td>{{ item.switchingSpeed}}&nbsp&nbsp&nbsp(秒/次)</td>
						<td>{{ item.status|deviceStateFilter}}</td>
						<td>{{ item.imstatus|deviceIMStateFilter}}</td>
						<td>{{ item.mobile}}</td>
						<td>{{ item.appTemplate.name }}</td>
						<td>{{ item.resolution }}</td>
						<td class="td-manage">
							<span class="l">
								<!-- <a title="查看" href="javascript:;" onclick="view('{{item.id}}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe695;</i></a> -->
								<a sec:authorize="hasRole('ROLE_DEVICE_EDIT')" title="编辑" href="javascript:;" onclick="edit('{{item.id}}')" class="btn btn-primary size-M radius" style="text-decoration: none">
									<i class="Hui-iconfont">&#xe6df;</i>
									编辑
								</a>
								<a sec:authorize="hasRole('ROLE_DEVICE_DELETE')" title="删除" href="javascript:;" onclick="del('{{item.id}}')" class="btn btn-danger size-M radius" style="text-decoration: none">
									<i class="Hui-iconfont">&#xe6e2;</i>
									删除
								</a>
								<a v-if="item.imstatus === 'Online'" class="btn btn-success size-M radius" href="javascript:;" onclick="sendMsg('{{ item.deviceName }}','reset','{{ item.sn }}')">
									<i class="Hui-iconfont">&#xe6f7;</i>
									重启
								</a>
								<br>
								<br>
								<!-- <a sec:authorize="hasRole('ROLE_DEVICE_BATCH_DELETE')" class="btn btn-danger size-M radius" href="javascript:;" onclick="sendMsg('off','{{ item.sn }}')" ><i class="Hui-iconfont">&#xe6e4;</i> 关机</a><br><br> -->
								<a v-if="item.status=='pendingApproval'" sec:authorize="hasRole('ROLE_DEVICE_APPROVAL')" title="通过" href="javascript:;" onclick="check('{{item.id}}','1','{{ item.sn }}')" class="btn btn-primary size-M radius" style="text-decoration: none">
									<i class="Hui-iconfont">&#xe6df;</i>
									通过
								</a>
								<a v-if="item.status=='pendingApproval'" sec:authorize="hasRole('ROLE_DEVICE_APPROVAL')" title="不通过" href="javascript:;" onclick="check('{{item.id}}','0')" class="btn btn-danger size-M radius" style="text-decoration: none">
									<i class="Hui-iconfont">&#xe6e2;</i>
									不通过
								</a>
							</span>

						</td>
					</tr>
				</tbody>
			</table>

			<div v-show="pageData.total > 0" class="laypage_main laypageskin_default" style="margin-top: 10px">
				<div class="l">
					<span>
						每页
						<select name="pageSizeSelect" id="pageSizeSelect" style="vertical-align: baseline !important; height: 27.6px;" onchange="query()">
							<option value="10" selected="selected">10</option>
							<option value="25">25</option>
							<option value="50">50</option>
							<option value="100">100</option>
						</select>
						条 显示 {{pageData.rowIndexStart}} 到 {{pageData.rowIndexEnd}} ，共 {{pageData.total}} 条
					</span>
				</div>
				<div id="pageNav" class="r"></div>
			</div>

		</div>
	</div>
	<script type="text/javascript">
		function sendMsg(deviceName, instruct, sn) {
			layer.confirm('确认要重启设备（' + deviceName + '）吗？', function(index) {
				window.parent.sendC2cMsg(instruct, sn);
				layer.close(index);
			});
		}

		function lockMaxImg() {
			$('.open-viewer').viewer({
				//url: 'data-original',//显示大图
				navbar : false,//缩略图导航
				title : true,//标题，读取alt属性
				fullscreen : true,//标题，读取alt属性
			});
		}
		// ==================================================
		var app = new Vue({
			el : '#app',
			data : {
				pageData : {},
			}
		});

		function getCookie(name) {
			var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
			if (arr = document.cookie.match(reg))
				return unescape(arr[2]);
			else
				return null;
		}

		function delCookie(name) {
			var exp = new Date();
			exp.setTime(exp.getTime() - 1);
			var cval = getCookie(name);
			if (cval != null)
				document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
		}

		/*
		 * 查询
		 */
		function query(pageNo, pageSize) {
			var city = getCookie("city");

			if (emptyempty(city)) {
				city = "";
			} else {
				delCookie("city");
			}
			if (!pageNo) {
				pageNo = 1;
			}
			if (!pageSize) {
				pageSize = $("#pageSizeSelect").val();
			}
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "POST",
				url : '/manager/device/queryPage',
				data : {
					pageNo : pageNo,
					pageSize : pageSize,
					search_LIKE_deviceName : $('#deviceName').val(),
					search_LIKE_sn : $('#sn').val(),
					search_LIKE_mobile : $('#mobile').val(),
					search_EQ_IMStatus : $("#imstatu option:selected").val(),
					search_EQ_status : $("#statu option:selected").val(),
					search_EQ_showType : $("#devType option:selected").val(),
					search_EQ_city : city
				},
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						app.pageData = data;
						laypage({
							cont : 'pageNav',
							pages : data.totalPage,
							curr : data.currentPage,
							skip : true,
							groups : 6,
							jump : function(obj, first) {
								if (!first) {
									query(obj.curr);
								}
							}
						});
					} else {
						sessionCheckTimeOut(result);
					}

					setTimeout("lockMaxImg()", 500);

				}
			});
		}

		/**
		 * 新增
		 */
		function add() {
			layer_full('新增设备', '/manager/device/add', '', '450');
		}

		/**
		 * 修改
		 */
		function edit(id) {
			layer_full('编辑设备', '/manager/device/edit/' + id, '', '450');
		}

		/*
		 * 删除
		 */
		function del(id) {
			layer.confirm('确认要删除吗？', function() {
				var tipIndex = null;
				$.ajax({
					type : "POST",
					url : '/manager/device/delete/' + id,
					beforeSend : function() {
						tipIndex = layer.load(0, {
							shade : false
						});
					},
					complete : function() {
						layer.close(tipIndex);
					},
					error : function(request) {
						layer.alert("系统出错");
					},
					success : function(data) {
						layer.alert(data.message);
						if (data.status == 0) {
							query();
						}
					}
				});
			});
		}

		/**
		 * 批量删除
		 */
		var batchDel = function() {

			var selectdItems = $(":checkbox[name=ids]:checked");
			if (selectdItems.size() == 0) {
				layer.alert("请选择要删除的记录！");
				return;
			}
			var ids = [];
			selectdItems.each(function() {
				ids.push($(this).val());
			});

			layer.confirm('确认要删除吗？', function() {
				var tipIndex = null;
				$.ajax({
					type : "POST",
					url : '/manager/device/deletes',
					data : {
						ids : ids
					},
					beforeSend : function() {
						tipIndex = layer.load(0, {
							shade : false
						});
					},
					complete : function() {
						layer.close(tipIndex);
					},
					error : function(request) {
						layer.alert("系统出错");
					},
					success : function(data) {
						layer.alert(data.message);
						if (data.status == 0) {
							query();
						}
					}
				});
			});

		};
		function updateStatus(id, type, val, sn) {
			var tipIndex = null;
			var data = "remark=" + val + "&id=" + id + "&type=" + type;
			$.ajax({
				type : "POST",
				url : '/manager/device/check',
				data : data,
				beforeSend : function() {
					tipIndex = layer.load(0, {
						shade : false
					});
				},
				complete : function() {
					layer.close(tipIndex);
				},
				error : function(request) {
					layer.alert("系统出错");
				},
				success : function(data) {
					if (sn != null) {
						getUsig(sn);
					}
					layer.alert(data.message);
					if (data.status == 0) {
						query();
					}
				}
			});
		}
		/*
		 * 审核
		 */
		function check(id, type, sn) {
			if (type == "1") {
				layer.confirm('确认要通过审核嘛？', function() {
					//修改状态
					updateStatus(id, type, null, sn);
				});

			} else {
				var index = layer.prompt({
					title : '请输入拒绝理由！'
				/*  area: ['420px', '240px'], //宽高 */
				}, function(val, index) {
					//修改状态
					updateStatus(id, type, val, null);
					layer.close(index);
				});
			}

		}
		$(function() {
			query();
		});
	</script>
</body>
</html>